<template>
	<view>
		<view class="head">
			<view class="box_flex flex-c">
				<image :src="user.showFaceUrl?user.showFaceUrl:'/static/images/user.png'"></image>
				<view class="right">
					<view class="name">{{user.name}}<text v-if="user.cardName">@{{user.cardName}}</text></view>
					<view class="tel" v-if="user.phone">{{user.phone}}</view>
				</view>
			</view>
			<view class="tip">所在场区：{{user.area}}</view>
			<view class="tip">入场时间：{{user.inTime}}</view>
		</view>
		<view class="bt">行为轨迹</view>
		<view class="card" v-for="(i, dex) in list" :key="dex">
			<view class="date flex-c"><text></text>{{i.day}}</view>
			<view class="details">
				<view class="li flex-c" v-for="(item, index) in i.pathList" :key="index">
					<view class="data">{{item.time}}</view>
					<view class="yuan" :class="item.type == 1?'on':''"></view>
					<view class="text-ellipsis">扫描【{{item.devName}}】闸机{{item.type == 1?'进场':'出场'}}</view>
				</view>
			</view>
		</view>
		<u-loadmore v-if="!is && list.length >= 10" status="nomore" line />
		<view class="no-list" v-if="!list || list.length == 0">
			<image src="@/static/images/default_empty.png"></image>
			<view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: {},
				list: [],
			};
		},
		onLoad(options) {
			let user = JSON.parse(options.user)
			this.user = user
			if (user.memberId) {
				this.getData(user.memberId)
			}
		},
		methods: {
			getData(memberId) {
				this.$app.ajax({
					data: {
						param: {
							memberId
						}
					},
					api: this.$api.inOutPath()
				}).then(res => {
					if (res.errorCode != '000000') return
					this.list = res.recordList
				})
			},

		}
	};
</script>

<style>
	page {
		background: #f7f7f7;
	}
</style>
<style lang="scss" scoped>
	.head {
		box-sizing: border-box;
		padding: 30rpx;
		background-color: #fff;
	}

	.box_flex image {
		width: 72rpx;
		height: 72rpx;
		margin-right: 30rpx;
		border-radius: 50%;
	}

	.right {
		flex: 1;
	}

	.name {
		font-weight: 500;
		color: #222222;
		font-size: 30rpx;
		line-height: 1.5;
		margin-bottom: 10rpx;
	}

	.name text {
		font-weight: 400;
		color: #4167C1;
		font-size: 22rpx;
		margin-left: 20rpx;
	}

	.tel {
		color: #999999;
		line-height: 1.5;
		font-size: 24rpx;
	}

	.tip {
		color: #333333;
		font-size: 26rpx;
		margin-top: 10rpx;
		line-height: 1.5;
	}

	.bt {
		font-weight: 500;
		color: #222222;
		font-size: 32rpx;
		line-height: 1.5;
		margin-top: 30rpx;
		padding-left: 30rpx;
	}

	.card {
		box-sizing: border-box;
		padding: 30rpx 0 10rpx;
		background-color: #fff;
		margin: 30rpx auto 0;
		width: 690rpx;
	}

	.date {
		box-sizing: border-box;
		font-size: 28rpx;
		font-weight: 500;
		color: #222222;
	}

	.date text {
		display: inline-block;
		width: 10rpx;
		height: 28rpx;
		background-color: #4167C1;
		margin-right: 20rpx;
	}

	.details {
		box-sizing: border-box;
		padding: 0 30rpx;
		margin-top: 10rpx;
		position: relative;
	}

	.details::after {
		content: "";
		display: block;
		position: absolute;
		width: 1px;
		top: 48rpx;
		height: calc(100% - 96rpx);
		left: 166rpx;
		background-color: #ccc;
	}

	.li {
		height: 40rpx;
		font-size: 26rpx;
		line-height: 1.5;
		font-weight: 400;
		color: #666666;
		padding: 20rpx 0;
	}

	.li .data {
		display: inline;
		width: 130rpx;
	}

	.li .text-ellipsis {
		flex: 1;
		color: #333333;
	}

	.li .yuan {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		display: inline;
		background: #E5E5E5;
	}

	.li .yuan.on {
		background-color: #4167C1;
	}
</style>